<%--
  Created by IntelliJ IDEA.
  User: Pro
  Date: 2017/6/20
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <base href="${pageContext.request.contextPath}/">
    <title>文章列表</title>
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">
    <link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/assets/css/main-copy.css">
    <link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/assets/css/liebiao.css">

    <style>
        #category li {
            display: inline-block;
            text-align: center;
        }

        #category a {
            text-decoration: none;
        }
    </style>
    <script src="static/assets/js/art-template-web.js"></script>
</head>
<body>
<%@include file="../../public/header.jspf" %>
<ol class="breadcrumb container" style="position: fixed;width: 100%;z-index: 1;top:50px" id="category">

    <div class="ml-0 ml-xl-5 ml-lg-4">
        <%--<li class="ml-1 ml-xl-3 ml-lg-3">--%>
        <%--<a onclick="selectCategory('')">全部</a>--%>
        <%--</li>--%>
        <div id="category-list"></div>
    </div>
</ol>
<br>
<div class="container pt-5 mt-5">
    <div id="content-list"></div>
    <nav class="text-center pt-5 mt-2" aria-label="Page navigation">
        <div id="page-list"></div>
    </nav>
</div>

<%--渲染分类--%>
<script id="category-manage-template" type="text/html">
    <li class="ml-1 ml-xl-3 ml-lg-3">
        <a href="javascript:void(0)" onclick="selectCategory('')">全部</a>
    </li>
    {{each items item index}}
    <li class="ml-1 ml-xl-3 ml-lg-3">
        <a href="javascript:void(0)" onclick="selectCategory('{{item.id}}')">{{item.name}}</a>
    </li>
    {{/each}}
</script>


<!-- 这里是渲染列表的 -->
<script id="content-manage-template" type="text/html">
    {{each items item index}}
    <a style="text-decoration:none;" href="article/{{item.id}}">
        <div class="box rounded col-lg-12 col-md-12 col-sm-12 m-auto pb-2 liebiao">
            <div class="row pt-3 pb-2 mt-4">
                <div class="ml-1 col-lg-2 col-md-3 col-sm-5">
                    <img class="img-fluid rounded mx-auto d-block" src={{item.image}} alt="图片加载失败">
                </div>
                <div class="col">
                    <div style="font-size: larger">{{item.title }}</div>
                    <div style="color: black">{{ item.description }}</div>
                    <div style="color: grey;font-size: small">最后时间：&nbsp;{{item.time}}</div>
                </div>
                <%--<br><br><br>--%>
            </div>
        </div>
    </a>
    {{/each}}
</script>


<%@include file="../../public/footter.jspf" %>
<script>
    var category = null;
    var categoryId = '';

    function selectCategory(id) {
        categoryId = id;
        getPage(1, 2)
    }

    $.ajax({
        url: "api/article/category/list",
        type: "GET",
        success: function (data) {//存入data
            var html = template('category-manage-template', {
                items: data
                // console.log(data)
            });
            document.getElementById('category-list').innerHTML = html;
        },
        error: function (data) {
            console.log(data);
        }
    });
    getPage(1, 2);

    function getPage(currentPage, size) {
        var url = 'api/article/list?currentPage=' + currentPage + '&size=' + size + '&categoryId=' + categoryId;
        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                // console.log(data);
                //渲染列表
                var html = template('content-manage-template', {
                    items: data.content
                });
                document.getElementById('content-list').innerHTML = html;

                html = '<nav class="text-center pt-5 mt-2" aria-label="Page navigation"><ul class="pagination justify-content-center">';
                html += '<li class="page-item"><a class="page-link" onclick="getPage(' + (data.page - 1) + ',' + 2 + ')" href="javascript:void(0)">上一页</a></li>';
                //渲染控件 （上一页|1、2、3、4|下一页）
                for (var i = 1; i <= Math.ceil(data.count / data.size); i++) {
                    console.log(Math.ceil(data.count / data.size));
                    if (i === data.page) {
                        html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        html += '<li class="page-item"><a class="page-link"  onclick="getPage(' + i + ',' + 2 + ')"  href="javascript:void(0)">' + i + '</a></li>';
                    }
                }
                html += '<li class="page-item"><a class="page-link" onclick="getPage(' + (data.page + 1) + ',' + 2 + ')" href="javascript:void(0)">下一页</a></li>';
                html += '</ul></nav>';
                document.getElementById('page-list').innerHTML = html;
            }
        })
    }
</script>
</body>
</html>

